.card {
    display: inline-block;
    margin: 1.5em;
    border: goldenrod solid 0.1em;
    padding: 0.2em;
    height: 7em;
    width: 7em;
    text-align: center;
    border-radius: 1em;
    font-size: 1em;
    background: linear-gradient(200deg,
        red -10%,
        red 19%,
        goldenrod 20%,
        goldenrod 22%,
        rgba(0,0,0,0) 22.3%,
        rgba(0,0,0,0) 79%,
        goldenrod 80%,
        goldenrod 82%,
        red 82%,
        red 110%
        );
    background-position: 0px -0.1px;
}

.projects {
    text-align: center;
    padding-top:1em;
    color:#FFFFFF;
    font-weight:bold;
}

.projects a:link, .projects a:visited {
    color: red;
}

/* mouse over link */
.projects a:hover, .projects a:active  {
    color: white;
}
.projects a:active  {
    color: goldenrod;
}

.projects .circle {
    width:7em;
    text-align: center;
}

.projects .circle {
    border-radius: 100%;
    overflow:hidden;
    background-color:white;
    margin-bottom:1em;
}

.circle img {
    width:100%;
}

@media (max-aspect-ratio: 1/1) {
    .card {
        max-height: 200px;
        max-width: 200px;
        height: 100%;
        width: 100%;
    }

    .projects .circle {
        height: 100%;
        width: 100%;
    }

}